<!DOCTYPE html>

<!-- 文本装饰 / -->

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>与文本相关的属性</title>


        <style type="text/css">
            div { 
                margin: 15px auto ; padding: 15px ; width: 60% ; border: 1px dotted blue ;
                font-size: 18px ;
            }
           
            .first {
                text-decoration: overline underline ; /* 文本装饰: none | overline | line-through | underline ;*/
            }

            .second {
                direction: ltr ; /* rtl | ltr | inherit */
            }

            .third {
                text-indent: 2em ; /* 1em 表示一倍 字体大小(font-size) */
            }

            .fourth {
                /* text-shadow: h-shadow v-shadow blur color ; */
                color: #FFF ;
                text-shadow: 0px 0px 5px red ;
            }

            .fifth {
                font-family: 宋体 ;
                letter-spacing: 1em ; /* 设置字符间距 */
            }

            .sixth {
                letter-spacing: 0.1em ;
                word-spacing: 1em ;
            }
        </style>
    </head>
    <body>

        <div class="first">测试文本装饰效果</div>

        <div class="second">今天天气其实不咋地，因为没有太阳，关键是没有女朋友</div>

        <div class="third">
            时维九月，序属三秋。潦水尽而寒潭清，烟光凝而暮山紫。
            俨骖騑于上路，访风景于崇阿；临帝子之长洲，得天人之旧馆。
            层峦耸翠，上出重霄；飞阁流丹，下临无地。鹤汀凫渚，穷岛屿之萦回；
            桂殿兰宫，即冈峦之体势。
        </div>

        <div class="fourth">
            我们在CSS中设置的 font-size 是指 字符 的 高度？宽度？对角线？
        </div>

        <div class="fifth">
            使用CSS可以为HTML元素设置我们期望的样式。
        </div>

        <div class="sixth">
            The universal selector is a special type selector, that represents an element of any element type.
            <br>
            通用选择器是一种特殊的类型选择器，它表示任何元素类型的元素
        </div>
        
    </body>
</html>